﻿

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>支付码</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="/js/JsBarcode.all.js"></script>
	<script src="/js/rem.js"></script>

	<link rel="stylesheet" href="/css/style.css">
	<style>
		.wrap {
			padding: 1.2rem 0;
			margin: 0 auto;
			width: 100%;
			height: 100%;
			background-color: #4c2a16;
		}

		.paymain {
			margin: 0 auto;
			height: 9rem;
			width: 85%;
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 0.1rem;
		}

		.barcode {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;
			height: 80px;
			width: 160px;
		}

		.qrcode {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			height: 150px;
			width: 150px;
			text-align: center;
		}

		.paycon {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
		}
	</style>
	<script>
		//$("#svgcode").JsBarcode('Hello world!')
		JsBarcode("#svgcode", "123", {
			format: "CODE39",//选择要使用的条形码类型
			width: 3,//设置条之间的宽度
			height: 100,//高度
			displayValue: true,//是否在条形码下方显示文字
			text: "456",//覆盖显示的文本
			fontOptions: "bold italic",//使文字加粗体或变斜体
			font: "fantasy",//设置文本的字体
			textAlign: "left",//设置文本的水平对齐方式
			textPosition: "top",//设置文本的垂直位置
			textMargin: 5,//设置条形码和文本之间的间距
			fontSize: 15,//设置文本的大小
			background: "#eee",//设置条形码的背景
			lineColor: "#2196f3",//设置条和文本的颜色。
			margin: 15//设置条形码周围的空白边距
		});
	</script>
</head>
<body>
    <div class="wrap">
        <div class="paymain">
            <div class="paycon">

                <view class="barcode" ><svg id="svgcode"></svg>
                    <img src="/image/1.png" alt="">
                </view>

                <view  class="codenum">3009 0353 3233 3420 85 </view>


                <view class="qrcode">
                    <img src="/image/2.png" alt="">
                </view>

            </div>
        </div>
    </div>
    <script>
       
    </script>
</body>
</html>

